<template>
  <ul class="message-box">
    <transition-group tag="li" name="slide-fade">
      <li
        v-for="item in $store.state.messages"
        :key="item.messageId"
        :class="'message-item ' + item.type"
      >
        <span :class="getIconClass(item)"></span>
        <span>{{ item.message }}</span>
      </li>
    </transition-group>
  </ul>
</template>

<script>
export default {
  methods: {
    getIconClass(item) {
      return {
        iconfont: true,
        "icon-xinxi": item.type == "info",
        "icon-jinggao": item.type == "warning",
        "icon-Success-Small": item.type == "success",
        "icon-cuowu": item.type == "error",
      };
    },
  },
};
</script>

<style scoped>
.message-box {
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  z-index: 100;
}

.iconfont {
  margin-right: 10px;
}

.message-item {
  padding: 10px;
  border-radius: 5px;
  font-size: 90%;
  margin: 5px 0px;
}

.info {
  color: #909399;
  background-color: #f4f4f5;
  border: 1px solid #e9e9eb;
}

.warning {
  color: #e6a23c;
  background-color: #fdf6ec;
  border: 1px solid #faecd8;
}

.success {
  color: #67c23a;
  background-color: #f0f9eb;
  border: 1px solid #e1f3d8;
}

.error {
  color: #f56c6c;
  background-color: #fef0f0;
  border: 1px solid #fde2e2;
}

/* 组件进入时的样式 */
.slide-fade-enter-active {
  transform: translateY(-20px);
  transition: all 0.5s;  
}

/* 组件离开时的样式 */
.slide-fade-leave-active {
  transition: all 0.5s;
}

/* 组件进入进入动画完成后的样式 */
.slide-fade-enter-to {
  transform: translateY(0px);
}

/* 组件将要进入和离开的样式 */
.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
}

</style>